# Acordeón / Accordion

### Código

```
<button></button>
```

### Tokens

**Color**

| **Class**                 | **Property** | **Color token** |
| :------------------------ | :----------- | :-------------- |
| `.bx--accordion__title`   | color        | `$text-01`      |
| `.bx--accordion__content` | color        | `$text-01`      |
| `.bx--accordion__arrow`   | fill         | `$icon-01`      |
| `.bx--accordion__item`    | border-top   | `$ui-03`        |

**Color de estados**

| **Class**                        | **Property** | **Color token** |
| :------------------------------- | :----------- | :-------------- |
| `.bx--accordion__heading:hover`  | background   | `$hover-ui`     |
| `.bx--accordion__title:focus`    | border       | `$focus`        |
| `.bx--accordion__title:disabled` | background   | `$disabled-02`  |
| `.bx--accordion__arrow:disabled` | fill         | `$disabled-02`  |
| `.bx--accordion__item--disabled` | border-top   | `$disabled-01`  |

**Tipografía**

| **Class**                 | **Type token**  |
| :------------------------ | :-------------- |
| `.bx--accordion__title`   | `$body-long-01` |
| `.bx--accordion__content` | `$body-long-01` |



**Estructura**

| **Class**                      | **Property**   | **Spacing token** |
| :----------------------------- | :------------- | :---------------- |
| `.bx--accordion__heading`      | height         | –                 |
| `.bx--accordion__item`         | border-top     | –                 |
| `.bx--accordion__arro`         | size           | –                 |
| `.bx--accordion__arrow`        | padding-right  | `$spacing-05`     |
| `.bx--accordion__title`        | margin-left    | `$spacing-05`     |
| `.bx--accordion__content`      | padding-right  | `-`               |
| `.bx--accordion__content`      | padding-top    | `$spacing-0`3     |
| `.bx--accordion__content`      | padding-left   | `$spacing-05`     |
| `.bx--accordion__item--active` | padding-bottom | `$spacing-0`6     |